<template>
  <a-modal title="大转盘商品" :width="800" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false" @ok="handleSubmit"
           @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!--<div class="step-form-style-desc">
        <h3>说明</h3>
        <h4>品牌中心，礼品商城</h4><span></span>
        <p>限时时间段设置无效</p>
      </div>
      <a-divider />-->
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序">
          <a-select showSearch optionFilterProp="children" :filterOption="filterOption" :disabled="isDisabled"
                    v-decorator="['storeId', {rules: [{required: true, message: '必输'}]}]">
            <a-select-option v-for="item in editProps" :key="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
          <a-input v-decorator="[ 'productName', {rules: [{ required: true, message: '请输入。。。' }]}]"></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="展示类型">
          <a-select :disabled="isDisabled" v-decorator="[ 'productType', {rules: [{ required: true, message: '请选择' }], initialValue:''} ]" @change="handleChange">
            <a-select-option :value="4">领取积分</a-select-option>
            <a-select-option :value="3">谢谢惠顾</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="lsNum" :labelCol="labelCol" :wrapperCol="wrapperCol" label="积分">
          <a-input v-decorator="[ 'amount2', {rules: []}]"></a-input>
        </a-form-item>
        <a-form-item v-if="lsNum" :labelCol="labelCol" :wrapperCol="wrapperCol" label="数量">
          <a-input v-decorator="[ 'maxCoupons', {rules: [{ required: true, message: '请输入。。。' }]}]"></a-input>
        </a-form-item>
      </a-form>

    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment';
  import pick from 'lodash.pick'
  //import { selectAllByParentCode } from '@/api/mini/coupon'
  //import { saveOrUpdate } from '@/api/mini/activity'
  import { optionselect, saveOrUpdate } from '@/api/product/addDazhuanpan'
  //import { selectAllStore } from '@/api/mini/store'
  /**
   * 数据
   */
  const data = function() {
    return {
      lsNum:false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      id: null,
      visible: false,
      confirmLoading: false,
      isDisabled: false,
      //图片相关
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      imageUrl: '',
      fileName: '',
      couponList: [],
      items: [],
      form: this.$form.createForm(this)
    }
  }

  const created = function() {
    // const typeslist = '1,2'
    // optionselect({types: typeslist}).then(res => {
    //   if (res.code === 200) {
    //     this.couponList = res.data
    //   }
    // })
    //console.log(form)
  }

  export default {
    props: {
      editProps: {
        type: Array,
        default: null
      }
    },
    data: data,
    created: created,
    /**
     * 方法
     */
    methods: {
      add () {
        this.visible = true
        this.lsNum=false
      },
      edit (record) {
        this.visible = true
        this.id = record.id
        this.isDisabled = true
        if(record.productType==4){
          this.lsNum=true
        }else {
          this.lsNum=false
        }
        this.imageUrl = record.fileUrl
        const { form: { setFieldsValue } } = this
        this.$nextTick(() => {
          const formData = pick(record, ['storeId','maxCoupons','amount2','productType','productName'])
          setFieldsValue(formData)
        })
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          console.log(values)
          if (!errors) {
            values.id = this.id
            saveOrUpdate(values).then((res) => {
              this.confirmLoading = false
              if (res.code === 200) {
                this.handleCancel()
                this.$emit('ok')
              }
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.id = null
        this.visible = false
        this.isDisabled = false
        this.confirmLoading = false
        this.form.resetFields()
        this.imageUrl = null
        this.filename = null
      },
      filterOption (input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      handleChange(value) {
        //console.log(`selected ${value}`);
        if(value==4){
          this.lsNum=true
        }else{
          this.lsNum=false
        }
      }
    },
  }
</script>

<style>
  .step-form-style-desc {
    padding: 0 56px;
    color: rgba(0, 0, 0, .45);
  }
  h3 {
    margin: 0 0 12px;
    color: rgba(0,0,0,.45);
    font-size: 16px;
    line-height: 32px;
  }

  h4 {
    margin: 0 0 4px;
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px;
  }

  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
</style>